@import './lib/reset.scss';

.container{
	.box {
		@include flex();
		@include rect(100%, auto);
		@include flexbox();
		@include flex-direction(column);
		.cart-header{
			@include rect(100%, 0.44rem);
			@include background-color(#f76c65);
			@include font-size(0.16rem)
			@include text-color(#fff);
			i{
				@include rect(56%, 0.44rem);
				@include flexbox();
				@include justify-content(flex-end);
				@include align-items();
			}
			span{
				@include rect(40%, 0.44rem);
				@include flexbox();
				@include justify-content(flex-end);
				@include align-items();
				margin-right:0.1rem;
			}
		}
		.cart-content{
			@include rect(100%,auto);
			@include background-color(#f7f7f7);
			position:reletive;
			.sum{
				position: absolute;
				left: 0;
				bottom: 0.5rem;
				z-index:1000;
				@include rect(100%,0.6rem);
				@include background-color(#fff);
				border-top:1px solid #eaeaea;
				@include flexbox();
				@include align-items();
				.iconfont{
					@include text-color(#c6c6c6);
					@include font-size(0.25rem);
					margin-left: 0.05rem;
				}
				.icon-checkboxmarkedcircle {
					@include text-color(#f76c65);
				}
				i{
					margin-left: 0.05rem;
				}
				.heji{
					margin-left: 0.15rem;
					@include font-size(0.18rem);
				}
				.zongji{
					@include font-size(0.18rem);
				}
				.jiesuan{
					display:block;
					@include rect(1.1rem,0.3rem);
					@include background-color(#f95850);
					border-radius: 0.05rem;
					@include text-color(#fff);
					@include font-size(0.16rem);
					@include flexbox();
					@include justify-content();
					@include align-items();
					margin-left: 0.75rem;
				}
			}
			.cc-ul{
				@include rect(100%,auto);
				@include background-color(#f7f7f7);
				li{
					@include flexbox();
					@include rect(100%,2rem);
					@include background-color(#fff);
					margin-bottom:0.1rem;
					@include border(1px 0 1px 0,#e2e2e2,solid);
					@include background-color(#fff);
					.li-left{
					  @include rect(10%,1.3rem);
					  @include background-color(#fff);
					  @include flexbox();
					  @include justify-content();
					  margin-top:0.4rem;
					  .iconfont {
						  @include text-color(#c6c6c6);
						  @include font-size(0.25rem);
					  }
					  .icon-checkboxmarkedcircle {
					  	@include text-color(#f76c65);
					  }
					}
					.li-right{
					  @include rect(90%,100%);
					  @include background-color(#fff);
					  @include flexbox();
					  padding-top:0.15rem;
					  flex-direction:column;
					  .lr-top{
						  @include flexbox();
						  img{
							@include rect(0.8rem,1rem);
						  }
						  .lrt-top{
							margin-left: 0.1rem;
							h2{
								margin-bottom:0.1rem;
							}
							i{
								padding-right: 0.05rem;
								@include text-color(#919191);
							}
						  }
					  }
					  .lr-kc{
						@include flexbox();
						margin-top:0.1rem;
						@include rect(100%,0.3rem);
						@include background-color(#fff);
						position: relative;
						.kc{
							display: block;
							@include rect(0.56rem,100%);
							@include text-color(#f05b54);
							@include flexbox();
							@include align-items();
							margin-left: 0.1rem;
						}
						.lrkc-right{
							@include flexbox();
							@include align-items();
							position: relative;
							.newprice{
								display:block;
								@include flexbox();
								line-height: 0.24rem;
								@include font-size(0.2rem);
								margin-left: 0.2rem;
							}
							.oldprice{
								display:block;
								@include flexbox();
								@include align-items();
								text-decoration: line-through;
								margin-left: 0.1rem;
								@include text-color(#919191);
							}
							b{
								display:block;
								@include flexbox();
								@include align-items();
								@include text-color(#919191);
								position: absolute;
								top: 0.05rem;
								right: -1.2rem;
							}
						}
						.countnum{
							display: none;
							@include rect(1rem,0.25rem);
							@include background-color(#ff0);
							@include flexbox();
							@include border(1px 1px 1px 1px,#aaa,solid,0.02rem)
							position: absolute;
							top: 0.05rem;
							right: 0.4rem;
							.minus{
								display: block;
								@include rect(0.25rem,0.25rem);
								@include background-color(#fff);
								@include flexbox();
								@include align-items();
								@include justify-content();
							}
							.add{
								display: block;
								@include rect(0.25rem,0.25rem);
								@include background-color(#fff);
								@include flexbox();
								@include align-items();
								@include justify-content();
							}
							.iptout{
								display: block;
								@include rect(0.5rem,0.25rem);
								@include background-color(#fff);
								@include border(0 1px 0 1px,#aaa,solid)
								.ipt{
									border:0;
									@include rect(0.2rem,0.25rem);
									@include background-color(#fff);
									margin-left: 0.2rem;
								}
							}
						}
						
					  }
					  .lr-text{
						@include rect(100%,0.3rem);
						@include flexbox();
						@include align-items();
						.iconfont{
							@include text-color(#f05b54)
							font-weight: 600;
						}
						p{
							margin-left: 0.05rem;
						}
					  }
					}
				}
			}
			.last{
				@include rect(100%,0.7rem);
			}
		}
	}
}